cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {
        this.index = -1;
        this.moFlag = false;
    },

    init : function (index, moFlag) {
        var endPos = null;

        this.index = index;
        this.moFlag = moFlag;
        if(moFlag){
            var endPos = cc.p(- index * 31 - 10, 0);
            this.node.position = endPos.add(cc.p(0, 30));
            this.node.opacity = 0;
            
            var action = cc.spawn(
                cc.moveTo(0.5, endPos).easing(cc.easeBounceOut()),
                cc.fadeTo(0.3, 255)
            );
            this.node.runAction(action);
        }else{
            this.node.active = false;
            this.node.position = cc.p(- index * 31, 0);

            setTimeout(function () {
                this.node.active = true;
            }.bind(this), 400 * Math.floor(index / 4));
        }
    },

    moveLeft : function (length, cancelMoFlag) {
        this.node.x = this.node.x + length * 31;
        if(cancelMoFlag){
            this.node.x += 10;
            this.moFlag = false;
        }
    },

    change : function () {
        this.node.x -= 10;
    }
});
